<template>
  <div>
    <!-- 声明式导航
        最终所有的导航标签会被编译成 a标签, to 属性变成href 属性
     -->
    <div>
      <!-- 第一种方式: 查询字符串形式 -->
      <!-- <router-link to="/home?id=100&name=jack">首页</router-link> -->
      <!-- 第二种方式: 以对象形式传参{path: 地址,query:参数对象} -->
      <!-- <router-link :to="{ path: '/category', query: { name: '小张', age: 20 } }" -->
      <!-- >分类页</router-link -->
      <!-- > -->
      <!-- 第三种方式: 使用动态路由的形式的 -->
      <!-- <router-link :to="`/car/${count}`">购物车</router-link> -->
      <!-- 第四种方式: 以对象的形式  {name:路由的命名, params:参数对象}
        注意: 在vue-router@3中可以name+params 进行路由跳转和参数的传递
        在 vue-router@4中使用name+params 形式可以跳转, 但是不能获取参数
      -->
      <!-- <router-link :to="{ name: 'mine' }">我的</router-link> -->
    </div>

    <!-- 编程式导航
      注意: this.$router ==== createRouter()实例对象
     -->
    <div v-if="$route.path != '/login'">
      <span @click="gotopageFn('/home?id=888')">首页</span>
      <span @click="gotopageFn({ path: '/category', query: { name: '阿珍', age: 18 } })">分类</span>
      <!-- <span @click="gotopageFn({ name: 'car' })">购物车</span> -->
      <span @click="gotopageFn('/car/88/99/66')">购物车</span>
      <span @click="gotopageFn('/mine')">我的</span>
    </div>

    <!-- 防止router-view 这个内置的组件,用来渲染显示路由匹配到的组件 -->
    <router-view></router-view>

    <!-- 使用tabbar 组件-vant  -->
    <van-tabbar v-model="active" route v-show="$route.meta.isshow" @change="changeFn">
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="search" to="/category">分类页</van-tabbar-item>
      <van-tabbar-item icon="friends-o" :to="{ name: 'car' }">购物车</van-tabbar-item>
      <van-tabbar-item icon="setting-o" to="/mine">我的</van-tabbar-item>
    </van-tabbar>

    <p @click='addsex'>{{person.name}}-{{person.age}}-{{person.sex}}</p>
  </div>
</template>

<script>
// 导入router 路由实例对象
// import router from '@/router'
// console.log('router', router)
import { Tabbar, TabbarItem } from 'vant'
export default {
  name: '',
  data() {
    return {
      count: 99,
      active: 0,
      person:{
        name:"小明",
        age:20
      }
    }
  },
  // mounted() {
  //   // 获取当前的路由信息对象
  //   console.log('App5-this.$route', this.$route) //当前路由信息对象, 里面包含了当前路由的全部信息
  //   console.log(this.$router) //路由实例对象, 该对象可以实现路由的跳转
  // },
  watch: {
    $route: {
      handler(newvalue) {
        // console.log('newvalue', newvalue)
      },
      deep: true
    }
  },
  methods: {
    gotopageFn(path) {
      // console.log(this.$router)
      // this.$router.replace(path)
      this.$router.push(path)
    },
    changeFn(index) {
      // console.log(index)
      this.active = index
      // console.log(this.active)
    },
    addsex(){
      this.person.sex = '男'
    }
  }
}
</script>
<style scoped>
</style>